@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .font-detective {
    font-family: "Special Elite", monospace;
  }

  html {
    min-height: 100%;
    scroll-behavior: smooth;
  }

  body {
    background-image: url("https://www.transparenttextures.com/patterns/paper.png");
    background-color: rgb(254 243 199 / 0.9); /* amber-50 with transparency */
  }
}

@layer utilities {
  .scale-102 {
    transform: scale(1.02);
  }

  .paper-texture {
    background-image: url("https://www.transparenttextures.com/patterns/old-paper.png");
    background-color: rgb(
      254 252 232 / 0.95
    ); /* light yellow with transparency */
  }

  .paper-texture-dark {
    background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
    background-color: rgb(120 53 15 / 0.95); /* amber-900 with transparency */
  }
}

/* SQL Editor Syntax Highlighting */
.sql-keyword {
  color: #fcd34d; /* amber-300 */
}

.sql-string {
  color: #6ee7b7; /* emerald-300 */
}

.sql-number {
  color: #7dd3fc; /* sky-300 */
}

.sql-comment {
  color: #d97706; /* amber-600 */
}

.sql-placeholder {
  color: rgba(217, 119, 6, 0.5); /* amber-700/50 */
}
